<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        {{message}}
        <input type="text" v-focus />
        <div v-if="'judge">
            <div v-img="imgurl"></div>
        </div>
        <button>修改imgurl</button>
        <button>移除指令</button>
    </div>
    <script>
        // 指令：v- 开头都是指令
        // v-html v-text v-once v-pre v-if v-else-f v-else
        // v-show v-slot ....
        // 自定义指令  :v-自定义指令名称
        // 一、全局自定义指令
        // Vue.directive("focus", {
        //     //自定义指令的生命周期
        //     inserted: function(ele, binding) {
        //         console.log(ele.binding);
        //         ele.focus();
        //     },
        // });

        // 二,局部指令
        new Vue({
            el: "#app",
            data: {
                message: "数据",
                judge: true,
                imgurl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656293742&t=9e653e7ad7e32bdac5f3d84524e7959d",
                imgurl2: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F063021120F9%2F210630120F9-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656293742&t=98497c17cb516264ecc40aaf3db79480",
            },
            directives: {
                img: {
                    /* 
                                                        自定义指令的生命周期
                                                        bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
                                                        inserted : 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
                                                        update : 所在组件更新的时候调用
                                                        componentUpdated : 所在组件更新完成后调用
                                                        unbind : 只调用一次，指令与元素解绑时调用
                                                    */
                    bind: function() {
                        console.log("bind执行了");
                    },
                },
            },
        });
    </script>
</body>

</html>